<template>
  <div class="app-container">
    <el-form ref="form" :model="formxi">
      <template>
        <label-wrap style="margin-right: 20px">手机号:</label-wrap>
        <el-input v-model="formxi.moble" size="small" style="width:150px;margin-right:7px;margin-bottom: 20px" />
      </template>
      <el-select v-model="formxi.regione" placeholder="类型：" size="small" class="ment-left">
        <el-option label="普通" value="shanghai" />
        <el-option label="定时" value="beijing" />
      </el-select>
      <el-select v-model="formxi.fasongs" placeholder="状态：" size="small" class="ment-left">
        <el-option label="已发送" value="yi" />
        <el-option label="未发送" value="wei" />
      </el-select>
      <template>
        <label-wrap style="margin-left:15px;margin-bottom: 20px">创建时间:</label-wrap>
        <el-date-picker v-model="formxi.date1" type="date" size="small" class="datasize" placeholder="选择日期" />
        <label-wrap style="margin-left: 15px">结束时间:</label-wrap>
        <el-date-picker v-model="formxi.date2" type="date" class="datasize" size="small" placeholder="选择日期" />
      </template>
      <el-button
        style="margin-left:15px"
        size="small"
        icon="el-icon-circle-plus"
        type="primary"
      >添加</el-button>
      <el-button
        type="warning"
        icon="el-icon-refresh-right"
        size="small"

      >清空</el-button>
    </el-form>
    <el-table
      :data="tableData"
      size="small"
      style="width: 100%;
      margin-top: 20px"
    >
      <el-table-column
        prop="date"
        label="ID"
        show-overflow-tooltip
      />
      <el-table-column
        prop="name"
        label="短信类型"
        show-overflow-tooltip
      />
      <el-table-column
        prop="address"
        label="短信内容"
        show-overflow-tooltip
      />
      <el-table-column
        prop="name"
        label="手机号"
        show-overflow-tooltip
      />
      <el-table-column
        prop="name"
        label="创建时间"
        show-overflow-tooltip
      />
      <el-table-column
        prop="name"
        label="发送时间"
        show-overflow-tooltip
      />
      <el-table-column
        prop="status"
        label="状态"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status" type="success">已启用</el-tag>
          <el-tag v-else type="danger">未启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="操作人"
        show-overflow-tooltip
      />
      <el-table-column label="操作">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"
        >查看</el-button>
      </el-table-column></el-table>
  </div>
</template>
<script>
export default {
  name: 'HelpMenu',
  data() {
    return {
      formxi: {
        moble: '',
        regione: '',
        fasongs: '',
        date1: '',
        date2: ''
      }
    }
  }
}
</script>

<style scoped>
.ment-left{
  margin-left: 7px;
  width: 100px;
  margin-bottom: 20px
}
.datasize{
  width: 170px;
}
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center !important;
}
</style>
